<template>
	<view class="register-container">
		<!-- 注册 -->
		<view class="top-bg"></view>
		<view class="top-bar">
			<u-icon name="arrow-left" size="25px" @click="onBackClick" color="#f5f5f5"></u-icon>
		</view>
		<view class="container">
			<view class="card-area">
				<view class="top-description">昵称</view>
				<u-input v-model="info.name" class="normalInput" placeholder="请在这里输入你的昵称" focus />
			</view>
			<view class="card-area">
				<view class="top-description">性别</view>
				<u-radio-group v-model="info.sex" size="40" style="margin-top: 10rpx;">
					<u-radio v-for="(item, index) in sexList" :key="index" :name="item.name" :disabled="item.disabled" active-color="#aa00ff">
						{{item.name}}
					</u-radio>
				</u-radio-group>
			</view>
			<view class="card-area">
				<view class="top-description">学校</view>
				<u-input v-model="info.school" class="normalInput" placeholder="请在这里输入你的学校" type="text" />
			</view>
			<view class="card-area">
				<view class="top-description">年级</view>
				<u-input v-model="info.grade" class="normalInput" placeholder="请在这里输入你的年级" type="number" />
			</view>
			<view class="card-area">
				<view class="top-description">手机号</view>
				<u-input v-model="info.phone" class="normalInput" placeholder="请在这里输入你的手机号" type="number" maxlength="11" clearable />
			</view>
			<view class="areement-container">
				<u-checkbox-group>
					<u-checkbox v-model="areement" active-color="#aa00ff" size="25" icon-size="25">
						<view style="font-size: 25rpx;">我已经阅读并接受用户使用协议</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="operation-container">
				<!-- 操作 -->

				<template v-if="areement">
					<u-button shape="square" type="register" ripple @click="onRegisterButtonClick">确认注册</u-button>
				</template>
				<template v-else>
					<u-button shape="square" type="register" disabled>确认注册</u-button>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	/*
	 * 作者: 臧锡洋
	 * 时间: 2020年11月21日 21:09:30
	 * 版本: V1
	 * 描述: 小程序功能页面 - 注册
	 */
	export default {
		data() {
			return {
				info: {
					name: '',
					school: '',
					grade: '',
					phone: '',
					sex: '男'
				},
				sexList: [{
						name: '男',
						disabled: false
					},
					{
						name: '女',
						disabled: false
					}
				],
				areement: false,
			};
		},
		methods: {
			// 返回按钮被单击
			onBackClick() {
				uni.reLaunch({
					url: '../../tabPages/my'
				})
			},
			// 确认注册按钮被单击
			onRegisterButtonClick() {
				for (let i in this.info) {
					if (this.info[i].length == 0) {
						uni.showToast({
							title: '请完善注册信息',
							icon: 'none'
						});
						return
					}
				}
				//判断电话号码
				let reg = /^1[3-9]\d{9}$/;
				if(!reg.test(this.info.phone)){
					uni.showToast({
						title: '请输入正确的11位电话号码',
						icon: 'none'
					});
					return
				}
				let param = {
					"grade": this.info.grade,
					"nikeName": this.info.name,
					"phone": this.info.phone,
					"school": this.info.school,
					"sex": (this.info.sex == '女' ? 0 : 1)
				}
				this.$u.api.profile(param).then(res => {
					
					console.log(JSON.stringify(res))
					if (res.code == 1000) {
						// 写入vuex状态管理
						this.$u.vuex('vuex_userInfo.sex', (this.info.sex == '女' ? '0' : '1')) //写入性别
						this.$u.vuex('vuex_userInfo.school', this.info.school)
						this.$u.vuex('vuex_userInfo.phone', this.info.phone)
						this.$u.vuex('vuex_userInfo.grade', this.info.grade + "级")
						this.$u.vuex('vuex_registerStatus',true) // 写入当前已注册
						this.onBackClick() //返回个人中心
					}
				})

				console.log("确认注册按钮别单击")

			}
		},
		mounted() {
			// 从vuex中挂载基本信息
			this.info.name = this.vuex_user
			this.info.sex = this.vuex_userInfo.sex == 0 ? "女" : "男"
		},
		beforeDestroy() {
			console.log(this.vuex_userInfo)
		}
	}
</script>

<style lang="scss">
	html {
		background-color: #fff;
	}

	.register-container {
		position: relative;
		height: 100vh;
		width: 100vw;

		.top-bg {
			width: 100vw;
			height: 30vh;
			background: url(../../../static/carry-inner-icon/register/topBg.png) no-repeat;
			background-size: 100% 100%;
		}

		.top-bar {
			position: absolute;
			top: 33rpx;
			left: 10rpx;
			z-index: 1;
			padding: 20rpx;
		}

		.container {
			/* 内容区域 */
			padding: 30rpx;
			margin: 10rpx;
			z-index: 1;
		}

		//输入域样式
		.card-area {
			padding: 20rpx;
			padding-bottom: 0 !important;
			border-radius: 5px;
			background-color: rgba($color: #eee, $alpha: .5);
			margin-bottom: 10rpx;

			.top-description {
				padding-bottom: 15rpx;
				border-bottom: 1px solid rgba($color: #000000, $alpha: 0.1);
			}

			input {
				padding: 10rpx 0;
				font-size: 14px;
				caret-color: #aa00ff;
			}

		}

		// 用户协议
		.areement-container {
			padding: 20rpx;
		}

	}
</style>
